<template>
  <div class="swiperBox">
    <div class="imgLeft" @click="clickLeft">
      <i class="el-icon-arrow-left"></i>
    </div>

    <div class="imgRight" @click="clickRight">
      <i class="el-icon-arrow-right"></i>
    </div>
    <div id="swiper">
      <div class="imgBox">
        <div class="imgDiv" v-for="(item, index) of state.imgList" :key="index">
          <img :src="item" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, onBeforeUnmount } from "vue";
import bg1 from "/@/assets/login.png";
import bg2 from "/@/assets/bg.png";

const props = defineProps({
  speed: Number,
  direction: String
});

let state = reactive({
  imgList: [bg1, bg2, bg1, bg2, bg1],
  timer: null,
  theSpeed: props.speed,
  imgWidth: 260,
  theDirection: props.direction
});

const clickLeft = () => {
  state.theDirection = "left";
};

const clickRight = () => {
  state.theDirection = "right";
};

onMounted(() => {
  let imgBox = document.getElementsByClassName("imgBox")[0];
  // 将imgBox下的图片进行拼接 循环展示图片
  // console.log(imgBox.value, "imgBox", box);
  imgBox.innerHTML += imgBox.innerHTML;
  let imgDiv = document.getElementsByClassName("imgDiv");
  // @ts-ignore
  imgBox.style.width = imgDiv.length * state.imgWidth + "px"; //设置div的宽度使图片可以放下
  // @ts-ignore
  // const self = state;
  function autoScroll() {
    // @ts-ignore

    if (imgBox.offsetLeft < -(imgBox.offsetWidth / 2)) {
      //提前更新left值，实现循环展示
      // @ts-ignore
      imgBox.style.left = 0;
    }
    // @ts-ignore
    if (imgBox.offsetLeft > 0) {
      //向右滚动 提前更新left值，实现循环展示
      // @ts-ignore
      imgBox.style.left = -(imgBox.offsetWidth / 2) + "px";
    }
    if (state.theDirection == "left") {
      //向左滚动,值为负
      state.theSpeed = -Math.abs(state.theSpeed);
    } else {
      //向右滚动
      state.theSpeed = Math.abs(state.theSpeed);
    }
    // 求出总的left值，等于left值加上移动的速度（px值）
    // @ts-ignore

    imgBox.style.left = imgBox.offsetLeft + state.theSpeed + "px";
  }

  state.timer = setInterval(autoScroll, 30); //全局变量 ，保存返回的定时器
});

onBeforeUnmount(() => {
  clearInterval(state.timer);
  state.timer = null;
});
</script>
<style scoped lang="scss">
.swiperBox {
  height: 150px;
  width: 100%;
  position: relative;
  .imgLeft {
    left: 10px;
    top: 40%;
  }
  .imgLeft,
  .imgRight {
    width: 27px;
    height: 38px;
    position: absolute;
    cursor: pointer;
    background: rgb(218, 216, 216);
    line-height: 38px;
    text-align: center;
    border-radius: 10px;
  }
  .imgRight {
    right: 10px;
    top: 40%;
  }
  .directionIcon:hover {
    opacity: 1;
  }
  #swiper {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    .imgBox {
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      overflow: hidden;
      display: flex;
      .imgDiv {
        width: 100%;
        margin-left: 15px;
        img {
          height: 100%;
          width: 280px;
          // width: 260px;
          // height: 120px;
        }
      }
    }
  }
}
</style>
